<template>
  <div class="flex flex-col justify-center min-h-screen">
    <Header></Header>

    <!-- 主内容区域 -->
    <main class="flex-1 container max-w-screen-2xl mx-auto p-4 px-6">
      <!-- grid 表格布局 分为五列 每个热搜占一列-->
      <div class="grid grid-cols-5 gap-5">
        <!-- 微博 -->
        <div class="col-span-5 md:col-span-1">
          <!-- 标题 -->
          <div class="weiboTitle flex items-center justify-center w-full h-16 mb-3 text-white rounded-t-md">
            <span>微博热搜</span>
          </div>
          <!-- 内容 -->
          <ul class="dark:bg-gray-800 dark:rounded-b-xl">
            <li v-for="(item, index) in weiboList" :key="index" @click="go(item.url)" class="hand-style mb-5 p-1 text-sm hover:bg-sky-100 dark:hover:bg-blue-500">
              <span class="index inline-block text-center rounded w-5 h-5 mr-2 leading-5 bg-gray-500 text-white">{{ index + 1}}</span>
              <span class="text-zinc-800 dark:text-white">{{ item.keyword }}</span>
            </li>  
          </ul>
        </div>
        <!-- 百度 -->
        <div class="col-span-5 md:col-span-1">
          <!-- 标题 -->
          <div class="baiduTitle flex items-center justify-center w-full h-16 mb-3 text-white rounded-t-md">
            <span>百度热搜</span>
          </div>
          <!-- 内容 -->
          <ul class="dark:bg-gray-800 dark:rounded-b-xl">
            <li v-for="(item, index) in baiduList" :key="index" @click="go(item.url)" class="hand-style mb-5 p-1 text-sm hover:bg-sky-100 dark:hover:bg-blue-500">
              <span class="index inline-block text-center rounded w-5 h-5 mr-2 leading-5 bg-gray-500 text-white">{{ index + 1}}</span>
              <span class="text-zinc-800 dark:text-white">{{ item.keyword }}</span>
            </li>
          </ul>
        </div>
        <!-- CSDN -->
        <div class="col-span-5 md:col-span-1">
          <!-- 标题 -->
          <div class="csdnTitle flex items-center justify-center w-full h-16 mb-3 text-white rounded-t-md">
            <span>CSDN热搜</span>
          </div>
          <!-- 内容 -->
          <ul class="dark:bg-gray-800 dark:rounded-b-xl">
            <li v-for="(item, index) in csdnList" :key="index" @click="go(item.url)" class="hand-style mb-5 p-1 text-sm hover:bg-sky-100 dark:hover:bg-blue-500">
              <span class="index inline-block text-center rounded w-5 h-5 mr-2 leading-5 bg-gray-500 text-white">{{ index + 1}}</span>
              <span class="text-zinc-800 dark:text-white">{{ item.keyword }}</span>
            </li>
          </ul>
        </div>
        <!-- 知乎 -->
        <div class="col-span-5 md:col-span-1">
          <!-- 标题 -->
          <div class="zhihuTitle flex items-center justify-center w-full h-16 mb-3 text-white rounded-t-md">
            <span>知乎热搜</span>
          </div>
          <!-- 内容 -->
          <ul class="dark:bg-gray-800 dark:rounded-b-xl">
            <li v-for="(item, index) in zhihuList" :key="index" @click="go(item.url)" class="hand-style mb-5 p-1 text-sm hover:bg-sky-100 dark:hover:bg-blue-500">
              <span class="index inline-block text-center rounded w-5 h-5 mr-2 leading-5 bg-gray-500 text-white">{{ index + 1}}</span>
              <span class="text-zinc-800 dark:text-white">{{ item.keyword }}</span>
            </li>
          </ul>
        </div>
        
        <!-- 头条 -->
        <div class="col-span-5 md:col-span-1">
          <!-- 标题 -->
          <div class="toutiaoTitle flex items-center justify-center w-full h-16 mb-3 text-white rounded-t-md">
            <span>头条热搜</span>
          </div>
          <!-- 内容 -->
          <ul class="dark:bg-gray-800 dark:rounded-b-xl">
            <li v-for="(item, index) in toutiaoList" :key="index" @click="go(item.url)" class="hand-style mb-5 p-1 text-sm hover:bg-sky-100 dark:hover:bg-blue-500">
              <span class="index inline-block text-center rounded w-5 h-5 mr-2 leading-5 bg-gray-500 text-white">{{ index + 1}}</span>
              <span class="text-zinc-800 dark:text-white">{{ item.keyword }}</span>
            </li>
          </ul>
        </div>
      </div>
    </main>

    <Footer></Footer>
  </div>
</template>
<script setup>
import Header from '@/layouts/frontend/components/Header.vue'
import Footer from '@/layouts/frontend/components/Footer.vue'
import { getHot } from '@/api/common/hot'
import { ref } from 'vue'

// 定义各大热搜
const weiboList = ref([])
const baiduList = ref([])
const zhihuList = ref([])
const toutiaoList = ref([])
const csdnList = ref([])

// 请求后端获取热搜数据
getHot("baidu").then(res => {
  baiduList.value = res.data.data
})
getHot("weibo").then(res => {
  weiboList.value = res.data.data
})
getHot("zhihu").then(res => {
  zhihuList.value = res.data.data
})
getHot("toutiao").then(res => {
  toutiaoList.value = res.data.data
})
getHot("csdn").then(res => {
  csdnList.value = res.data.data
})

// 点击热搜词条打开新页面
const go = (url) => {
    window.open(url, '_blank');
}


</script>
<style scoped>
li:first-child .index {
  background-color: #FE2D46;
}
li:nth-child(2) .index {
  background-color: #FF6600;
}
li:nth-child(3) .index {
  background-color: #FAA90E;
}

.weiboTitle {
  background-color: #e7322c;
  background-image: radial-gradient(circle at 50% -45%, #d84b4b, #e7322c);
}

.baiduTitle {
  background-color: #496bf0;
  background-image: radial-gradient(circle at 50% -45%, #5c9dd8, #4e6ef2);
}

.zhihuTitle {
  background-color: #53a7f5;
  background-image: radial-gradient(circle at 50% -45%, #53a7f5, #4e6ef2);
}

.csdnTitle {
  background-color: #fc5632;
  background-image: radial-gradient(circle at 50% -45%, #f07a56, #fc5632);
}

.toutiaoTitle {
  background-color: #dd504a;
  background-image: radial-gradient(circle at 50% -45%, #d63736, #dd504a);
}



</style>